<template>
    <div>
        <h1>房号显示</h1>
        <a href="/Add">添加</a>
        <br>
        房号: <input type="text" v-model="find.hnum">
        状态: 
        <select v-model="find.state">
            <option :value="null">请选择</option>
            <option :value="true">开启</option>
            <option :value="false">关闭</option>
        </select>
        <input type="button" value="查询" @click="shows">
        <input type="button" value="清空" @click="QK">
        <table class="table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>房间号</th>
                    <th>假期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{ d.Id }}</td>
                    <td>{{ d.Hnum }}</td>
                    <td>{{ d.Price }}</td>
                    <td>{{ d.State==true?"开启":"关闭" }}</td>
                    <td>
                        <input type="button" value="编辑" @click="getupt(d.Id)">
                        <input type="button" value="删除" @click="Dels(d.Id)">
                        <input type="button" :value="d.State==true?'关闭':'开启'" @click="getzt(d.Id)">

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

//查询条件
const find=ref({
    hnum:'',
    state:null
})

//循环
const data=ref([{
    "Id": 0,
    "Hnum": "",
    "Price": "",
    "State": true,
    "IsDel": true
}])

//钩子
onMounted(() => {
    shows();
})

//显示
const shows=()=>{
    axios.get("https://localhost:7133/api/House/GetHouse",{params:find.value}).then(res=>{
        data.value=res.data;
    })
}

//修改状态
const getzt=(vid:any)=>{
    axios.get("https://localhost:7133/api/House/Uptstate",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("修改成功");
            shows();
        }
        else{
            alert("修改失败");
            return;
        }
    })
}


//清空
const QK=()=>{
    find.value.hnum="",
    find.value.state=null;
    shows();
}

//删除
const Dels=(vid:any)=>{
    if(confirm("确定要删除吗")){
    axios.get("https://localhost:7133/api/House/DelsHouse",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            shows();
        }
        else{
            alert("删除失败");
            return;
        }
    })
}
}

//修改
var touse=useRouter();
const getupt=(vid:any)=>{
    touse.push({path:"/Upt",query:{id:vid}})
}


</script>

<style scoped>

</style>